<template>
  <div class="result">
    <!-- 顶部导航栏 -->
    <van-nav-bar :title="key + '搜索结果'" fixed />
    <!-- 搜索结果 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      
    >
      <van-cell
        v-for="(item, index) in list"
        :key="index"
        :title="item.title"
        @click="toDetail(item.art_id)"
      />
    </van-list>
  </div>
</template>

<script>
import { getResultApi } from "@/api";
export default {
  data() {
    return {
      // 搜索的关键字
      key: this.$route.query.key,
      // list 的加载状态
      loading: false,
      // list 的数据源是否加载完毕
      finished: false,
      // 数据源
      list: [],
      // 当前页
      page: 1,
      // 页容量
      per_page: 10,
      // 总数量
      total: -1,
    };
  },
  methods: {
    toDetail(art_id) {
      // 跳转到文章详情
      this.$router.push(`/home/detail?id=${art_id}`);
    },
    async onLoad() {
      // 获取搜索结果
      const res = await getResultApi({
        page: this.page,
        per_page: this.per_page,
        q: this.key,
      });
      // 保存数据到 list 中(这里不能直接赋值，应该拼接)
      this.list = [...this.list, ...res.data.data.results];
      // 保存总数量
      this.total = res.data.data.total_count;
      // 将加载状态设置为 false
      this.loading = false;
      // 判断数据源是否加载完毕
      if (this.list.length >= this.total) {
        this.finished = true;
      }
    },
  },
};
</script>

<style lang="less">
.result {
  margin-top: 50px;
}
</style>